import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Row, Col, Breadcrumb, Timeline, Spin } from 'antd';
import Title from '../../common/Title';
import WHLabel from '../../common/WH-Label';
import Prompt from '../../common/Prompt';
import { connect } from '../../../states/insurance/insuranceInfo';
import { connectRouter } from '../../../mixins/router';
import api from '../../../api/api';
// 会员卡片弹窗
import CustomerCart from '../../customerCenter/CustomerCard';

class VideoDoctorDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      customerCardVisible: false,
      currentCustomerId: null,
      insuranceInfo: {},
    };
  }

  async componentDidMount() {
    this.insuranceId = this.props.match.params.insuranceId;
    const data = await api.getMedicOrdersDetails(this.insuranceId);
    this.setState({
      insuranceInfo: data,
    });
  }

  componentWillReceiveProps(props) {
    if (this.insuranceId !== props.match.params.insuranceId) {
      this.insuranceId = this.props.match.params.insuranceId;
      this.props.resetPage();
    }
  }
  get backToIndex() {
    if (this.props.router.query.r && this.props.router.query.r.indexOf('/VideoDoctorList') === 0) {
      return this.props.router.query.r;
    } else {
      return '/VideoDoctorList';
    }
  }
  // 显示会员卡片
  showCustomerCard = (id) => {
    this.setState({
      customerCardVisible: true,
      currentCustomerId: id,
    });
  };
  hideCustomerCard = () => {
    this.setState({
      customerCardVisible: false,
    });
  };
  render() {
    const { insuranceInfo } = this.state;
    return (
      <div>
        <CustomerCart
          id={this.state.currentCustomerId}
          visible={this.state.customerCardVisible}
          hideCustomerCard={this.hideCustomerCard}
        ></CustomerCart>

        <Spin spinning={this.props.insuranceOrderDetail.status === 'pending'}>
          <div className="insurance_order_detail">
            <Breadcrumb className="breadcrumb-box">
              <Breadcrumb.Item>
                <Link to={this.backToIndex}>视频医生订单列表</Link>
              </Breadcrumb.Item>
              <Breadcrumb.Item>视频医生订单详情</Breadcrumb.Item>
            </Breadcrumb>
            <Title text="视频医生订单号" num={insuranceInfo.orderNo} left={5}>
              <Prompt text={insuranceInfo.orderGrade === 1 ? '主订单' : '子订单'} />
              <Prompt text={insuranceInfo.statusLabel || '未知状态'} />
            </Title>
            <div style={{ backgroundColor: '#fff' }}>
              <Row className="label-box" gutter={40}>
                <Col className="label-col" span={8}>
                  <WHLabel
                    title="服务单号："
                    text={
                      <Link to={`/patientInsuranceDetail/${insuranceInfo.insuranceOrderId}?r=`}>
                        <span className="clickable">{insuranceInfo.insuranceOrderNo}</span>
                      </Link>
                    }
                  />
                </Col>
                {insuranceInfo.status === 20 ? (
                  <Col className="label-col" span={8}>
                    <WHLabel
                      title="服务效期："
                      text={
                        insuranceInfo.startDate
                          ? `${insuranceInfo.startDate || '-'}至${insuranceInfo.endDate || '-'}`
                          : ''
                      }
                    />
                  </Col>
                ) : null}
              </Row>
              <Row className="label-box" gutter={40}>
                <Col className="label-col" span={8}>
                  <WHLabel title="服务产品：" text={insuranceInfo.insuranceProductName} />
                </Col>
                <Col className="label-col" span={8}>
                  <WHLabel title="服务产品编码：" text={insuranceInfo.insuranceProductCode} />
                </Col>
                <Col className="label-col" span={8}>
                  <WHLabel title="卡类型：" text={insuranceInfo.cardTypeLabel} />
                </Col>
              </Row>
              <Title text="服务对象" left={5} />
              <Row className="label-box" gutter={40}>
                <Col className="label-col" span={8}>
                  <WHLabel title="服务对象：" text={insuranceInfo.name} />
                </Col>
              </Row>
              <Title text="订单流水" left={5} />
              <Timeline className="timeline-box">
                {insuranceInfo && insuranceInfo.logs && insuranceInfo.logs.length
                  ? insuranceInfo.logs.map((item, index) => {
                      return (
                        <Timeline.Item key={index}>
                          <span>{item.createDate}</span>
                          {item.content}
                        </Timeline.Item>
                      );
                    })
                  : null}
              </Timeline>
              <Title text="系统信息" left={5} />
              <Row className="label-box" gutter={40}>
                <Col className="label-col" span={8}>
                  <WHLabel title="创建人：" text={insuranceInfo.createByName} />
                </Col>
                <Col className="label-col" span={8}>
                  <WHLabel title="创建时间：" text={insuranceInfo.createDate} />
                </Col>
                <Col className="label-col" span={8}>
                  <WHLabel title="创建来源：" text={insuranceInfo.sourceTitle} />
                </Col>
                <Col className="label-col" span={24}>
                  <WHLabel title="备注：" text={insuranceInfo.remarks} />
                </Col>
              </Row>
            </div>
          </div>
        </Spin>
      </div>
    );
  }
}

export default connectRouter(connect(VideoDoctorDetail));
